<template>
    <div>
        <el-row class="hotel-item" :gutter="20" type="flex"  v-for="(item, index) in this.$store.state.hotel.history" :key="index">
            <el-col :span="8">
                <span class="img-wrapper">
                    <nuxt-link :to="'/hotel/' + item.id + '.html'">
                        <img :src="item.photos" width="320" height="210">
                    </nuxt-link>
                </span>
            </el-col>

            <el-col :span="10">
                <!-- 名称信息 -->
                <h4 class="hotel-cn-name">
                    <nuxt-link :to="'/hotel/' + item.id + '.html'">
                        {{ item.name }}
                    </nuxt-link>
                </h4>
                <div class="hotel-en-name">
                    <span>{{ item.alias }} </span>
                    <!-- <starBudget :value="hotellevel" /> -->
                    <span v-if="item.hoteltype">{{ item.name }}</span>
                </div>


                <el-row type="flex" :gutter="10">
                    <el-col :span="10">
                        <rateBudget :value="item.stars" class="rate-budget" />
                    </el-col>
                </el-row>

                <!-- 简介 -->
                <div class="hotel-summary-row">{{ item.summary }}</div>

                <div class="location-row">
                    位于: {{ item.address }}
                </div>
                
            </el-col>
            <!-- <button >删除</button> -->
        </el-row>
        
    </div>
</template>

<script>
import rateBudget from '@/components/hotel/rateBudget'
export default {
    data() {
        return {
            renderData: [],
            pageIndex: 1,
            pageSize: 10,
        }
    },
    components: {
        rateBudget
    },
    mounted() {
        // console.log(66666,this.$store.state.hotel.history.photos)
    },
    methods: {
        
    }
}
</script>

<style scoped lang="less">
.hotel-item {
    padding: 25px 0;
    border-bottom: 1px solid #eee;
}

.larger {
    font-size: larger;
}

// span {
//     // color: #fff;
//     // display: block;
//     // padding: 2px 10px;
//     // background: orange;
//     // border-radius: 4px;
//     // font-size: 12px;
//     // cursor: pointer;
// }

//   .x-large {
//     font-size: x-large;
//   }
//   .height-light {
//     color: #f90;
//   }
.hotel-cn-name {
    font-weight: normal;
    font-size: x-large;
}

.hotel-en-name {
    margin-bottom: 0.5em;
}

.rate-budget {
    display: inline-block;
}

.hotel-summary-row {
    margin: 1em 0;
    font-size: 14px;
    color: #666;
}

.location-row {
    color: #666;
    font-size: 14px;
}

.img-wrapper {
    width: 420px;

    >img {
        border-radius: 4px;
    }
}

.hotel-en-name {
    color: #999;
}

//   .price-col {
//     margin-top: 20px;
//     .price-num {
//       font-size: x-large;
//     }
//     /deep/ .product-row {
//       cursor: pointer;
//     }
//   }
</style>
